import React from 'react';
import { Router, Route } from 'react-router-dom';
import { asyncComponent } from 'AsyncComponent';
import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducer';
import Sider from './components/sider/index';
import Head from './components/head/index';
import DialogLoad from './components/dialog-load';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
import {createHashHistory} from 'history'
const history = createHashHistory()
let middleware = [thunk];
let store = createStore(reducer, applyMiddleware(...middleware));

const demo1 = asyncComponent(() => import(/* webpackChunkName: 'demo1' */ './demo1'));

export default class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			collapsed: false,
			menuSelected: ''
		};
	}

	render() {
		return (
			<Provider store={store}>
				<ConfigProvider locale={zhCN}>
					<div className="main">
						<Sider collapsed={this.state.collapsed} menuSelectedCallBack={this._menuSelectedCallBack}/>
						<div className="rightWarp" id="rightWrap">
							<Head callback={this._headcallback} menuSelected={this.state.menuSelected}/>
							<div className={this.state.collapsed ? 'right-box-fold' : 'right-box'}>
								<div className="container">
									<Router history={history}>
										<div>
											<Route exact path="/" component={demo1}/>
											<Route exact path="/demo" component={demo1}/>
										</div>
									</Router>
								</div>
							</div>
						</div>
					</div>
				</ConfigProvider>
			</Provider>
		);
	}

	_headcallback = (collapsed) => {
		this.setState({
			collapsed: collapsed
		});
	};

	_menuSelectedCallBack = (key) => {
		this.setState({
			menuSelected: key
		});
	};
}
